<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		color:{
            type:Array,
            default:['#56f8ff', '#6cabff']
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            var img1 = {
                a: require('@/assets/images/dataAnalysis/user01.png'),
                b: require('@/assets/images/dataAnalysis/user02.png')
            }
            var img2 = {
                a: require('@/assets/images/dataAnalysis/user01.png'),
                b: require('@/assets/images/dataAnalysis/user02.png')
            }
            var img3 = {
                a: require('@/assets/images/dataAnalysis/user01.png'),
                b: require('@/assets/images/dataAnalysis/user02.png')
            }
            var img4 = {
                a: require('@/assets/images/dataAnalysis/user01.png'),
                b: require('@/assets/images/dataAnalysis/user02.png')
            }
            var img5 = {
                a: require('@/assets/images/dataAnalysis/user01.png'),
                b: require('@/assets/images/dataAnalysis/user02.png')
            }
            var value = 1; // >0

            let option = {
                grid: {
                    left: "5%",
                    top: "5%",
                    bottom: "5%",
                    right: "15%",
                    containLabel: true
                },
                tooltip: {
                    trigger: "item",
                },
                xAxis: {
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [{
                    type: "category",
                    inverse: false,
                    data: ["医疗器械", "土地拍卖", "综合交易", "政府采购", "建设工程"],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "#3e86dd"
                        }
                    },
                    axisLabel: {
                        margin: 35,
                        textStyle: {
                            color: "#fff",
                            fontSize: 18,
                        }
                    }
                }],
                series: [{
                        tooltip: {
                            show: false
                        },
                        z: 4,
                        type: "pictorialBar",
                        symbolSize: ['20', '20'],
                        symbolRepeat: "fixed",
                        data: [{
                                value: value,
                                symbol: 'image://' + img1.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img2.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img3.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img4.b,
                            },
                            {
                                value: value,
                                symbol: 'image://' + img5.b,
                            }
                        ]
                    },
                    {
                        z: 6,
                        type: "pictorialBar",
                        symbolSize: ['20', '20'],
                        animation: true,
                        symbolRepeat: "fixed",
                        symbolClip: true,
                        symbolPosition: "start",
                        symbolOffset: [0, 0],
                        data: [{
                                value: 60,
                                symbol: 'image://' + img1.a,
                            },
                            {
                                value: 85,
                                symbol: 'image://' + img2.a,
                            },
                            {
                                value: 105,
                                symbol: 'image://' + img3.a,
                            },
                            {
                                value: 130,
                                symbol: 'image://' + img4.a,
                            },
                            {
                                value: 185,
                                symbol: 'image://' + img5.a,
                            }
                        ],
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 18,
                                },
                                position: "right",
                                offset: [15, 0]
                            }
                        },
                    },
                    {
                        type: "bar"
                    },
                ]
            };

            this.chart.setOption(option);

            let this_ = this;
            var index = 0 // 播放所在下标
            setInterval(() => {
                this_.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0, // 第几条series
                    dataIndex: index // 第几个tooltip
                })
                index++
                if (index > 6) {
                    index = 0
                }
            }, 1000)
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
